<template xmlns="http://www.w3.org/1999/html">
  <a-spin :spinning="confirmLoading">
    <a-form style="height: 525px" :form="form">
      <a-row style="height: 90%; overflow-y: auto">
        <a-col :span="14" style="height: 100%">
          <div style="height: 55%">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="车场编号：" v-show="false">
              <p v-decorator="['parkCode', {}]"></p>
            </a-form-item>
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="车场名称：" v-show="false">
              <p v-decorator="['parkName', {}]"></p>
            </a-form-item>
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="临时车入场开闸方式：">
              <a-radio-group v-decorator="['temporaryGateIn', { initialValue: 1 }]">
                <a-radio style="margin-right: 10px; margin-left: 20px" :value="1"> 自动开闸 </a-radio>
                <a-radio style="margin-left: 20px; margin-right: 20px" :value="2"> 确认开闸 </a-radio>
                <a-radio style="margin-left: 20px" :value="3"> 不开闸 </a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="临时车出场开闸方式：">
              <a-radio-group v-decorator="['temporaryGateOut', { initialValue: 1 }]">
                <a-radio style="margin-right: 10px; margin-left: 20px" :value="1"> 自动开闸 </a-radio>
                <a-radio style="margin-left: 20px; margin-right: 20px" :value="2"> 确认开闸 </a-radio>
                <a-radio style="margin-left: 20px" :value="3"> 不开闸 </a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="储值车入场开闸方式：">
              <a-radio-group v-decorator="['monthlyRentalGateIn', { initialValue: 1 }]">
                <a-radio style="margin-right: 10px; margin-left: 20px" :value="1"> 自动开闸 </a-radio>
                <a-radio style="margin-left: 20px; margin-right: 20px" :value="2"> 确认开闸 </a-radio>
                <a-radio style="margin-left: 20px" :value="3"> 不开闸 </a-radio>
              </a-radio-group>
            </a-form-item>

            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="储值车出场开闸方式：">
              <a-radio-group v-decorator="['monthlyRentalGateOut', { initialValue: 1 }]">
                <a-radio style="margin-right: 10px; margin-left: 20px" :value="1"> 自动开闸 </a-radio>
                <a-radio style="margin-left: 20px; margin-right: 20px" :value="2"> 确认开闸 </a-radio>
                <a-radio style="margin-left: 20px" :value="3"> 不开闸 </a-radio>
              </a-radio-group>
            </a-form-item>

            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="是否自动使用优惠券：">
              <a-radio-group v-decorator="['useCoupon', { initialValue: 0 }]">
                <a-radio style="margin-right: 10px; margin-left: 20px" :value="0"> 不开启 </a-radio>
                <a-radio style="margin-left: 20px; margin-right: 20px" :value="1"> 开启 </a-radio>
              </a-radio-group>
            </a-form-item>

            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="{
                xs: {
                  span: 12,
                },
                sm: {
                  span: 8,
                },
              }"
              label="车牌识别相机类型："
              style="margin-bottom: 0px"
            >
              <a-select
                v-decorator="['cameraType', { initialValue: 0 }]"
                :options="[
                  {
                    value: 0,
                    label: '臻识',
                  },
                  {
                    value: 1,
                    label: '芊熠',
                  },
                  {
                    value: 2,
                    label: '华夏',
                  },
                ]"
              ></a-select>
            </a-form-item>

            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="{
                xs: {
                  span: 12,
                },
                sm: {
                  span: 8,
                },
              }"
              label="识别结果控制板类型："
            >
              <a-select
                v-decorator="['controlPanelType', { initialValue: 0 }]"
                :options="[
                  {
                    value: 0,
                    label: '方控',
                  },
                  {
                    value: 1,
                    label: '芊熠',
                  },
                  {
                    value: 2,
                    label: '菲利德',
                  },
                  {
                    value: 3,
                    label: '启协',
                  },
                  {
                    value: 4,
                    label: '小明',
                  },
                  {
                    value: 5,
                    label: '方控小竖屏',
                  },
                  {
                    value: 6,
                    label: 'YZL(绿卡)',
                  },
                  {
                    value: 7,
                    label: 'YZL(蓝卡)',
                  },
                  {
                    value: 8,
                    label: '安快',
                  },
                ]"
              ></a-select>
            </a-form-item>
          </div>
          <div style="height: 30%">
            <a-form-item
              :labelCol="labelCol1"
              :wrapperCol="wrapperCol1"
              label="车辆放行设置"
              style="margin-bottom: 0px"
            >
            </a-form-item>
            <a-row>
              <a-col v-show="false" :span="12">
                <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1">
                  <a-checkbox v-decorator="['temporaryCarZero', { valuePropName: 'checked', initialValue: false }]">
                    临时车出场费0元自动开闸
                  </a-checkbox>
                </a-form-item>
              </a-col>
              <a-col v-show="false" :span="12">
                <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1">
                  <a-checkbox v-decorator="['policeCar', { valuePropName: 'checked', initialValue: true }]">
                    警车自动放行
                  </a-checkbox>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12" v-show="false">
                <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1">
                  <a-checkbox v-decorator="['temporaryStopIn', { valuePropName: 'checked', initialValue: true }]">
                    临时车禁止驶入小车场
                  </a-checkbox>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" style="margin-bottom: 0px">
                  <a-checkbox v-decorator="['temporaryStallType', { valuePropName: 'checked', initialValue: true }]">
                    临时车满位禁止通行
                  </a-checkbox>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" style="margin-bottom: 0px">
                  <a-checkbox v-decorator="['licensablePay', { valuePropName: 'checked', initialValue: false }]">
                    开通无感支付
                  </a-checkbox>
                </a-form-item>
              </a-col>
            </a-row>
          </div>
        </a-col>
        <a-col :span="10" style="height: 100%">
          <div style="height: 55%">
            <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" label="月租车处理方式："></a-form-item>
            <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1">
              <a-radio-group
                v-decorator="['handleMonthlyRentalCar', { initialValue: 2 }]"
                @change="handleMonthlyRentalCarOnChange"
              >
                <a-row style="margin-top: 8px">
                  <a-radio :value="1" :span="12"> 月租车过期禁止入场 </a-radio>
                  <a-radio :value="2" :span="12"> 月租车过期按临时车收费 </a-radio>
                </a-row>
                <a-row style="margin-top: 34px">
                  <a-form-item>
                    <a-radio :value="3">
                      过期
                      <a-select
                        :options="this.options"
                        style="width: 120px"
                        :disabled="disabled"
                        v-decorator="['overDay', { initialValue: 0 }]"
                      >
                      </a-select>
                      天后禁止入场
                    </a-radio>
                  </a-form-item>
                </a-row>
              </a-radio-group>
            </a-form-item>
            <a-form-item> </a-form-item>
          </div>
          <div>
            <a-form-item
              :labelCol="labelCol1"
              :wrapperCol="wrapperCol1"
              label="临时车出场无入场记录处理方式："
            ></a-form-item>
            <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1">
              <a-radio-group
                v-decorator="['admissionRecordsCar', { initialValue: 1 }]"
                @change="admissionRecordsCarOnChange"
              >
                <a-row style="margin-top: 8px">
                  <a-radio :value="1" :span="12"> 不开闸 </a-radio>
                  <a-radio :value="2" :span="12"> 免费放行 </a-radio>
                </a-row>
              </a-radio-group>
            </a-form-item>
          </div>

          <div>
            <a-form-item
                :labelCol="labelCol1"
                :wrapperCol="wrapperCol1"
                label="储值车出场无入场记录处理方式："
            ></a-form-item>
            <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1">
              <a-radio-group
                  v-decorator="['admissionRecordsCarStoredCar', { initialValue: 1 }]"
                  @change="admissionRecordsCarStoredCarOnChange"
              >
                <a-row style="margin-top: 8px">
                  <a-radio :value="1" :span="12"> 不开闸 </a-radio>
                  <a-radio :value="2" :span="12"> 免费放行 </a-radio>
                </a-row>
              </a-radio-group>
            </a-form-item>
          </div>
        </a-col>
        <a-row>
          <a-col :span="8">
            <a-form-item
              :labelCol="{ xs: { span: 12 }, sm: { span: 10 }, style: 'textAlign:left' }"
              :wrapperCol="{ xs: { span: 12 }, sm: { span: 8 }, style: 'textAlign:left' }"
              label="图片保留单位"
            >
              <a-select
                v-decorator="['deleteType', { initialValue: model.deleteType }]"
                :options="[
                  {
                    value: 0,
                    label: '天',
                  },
                  {
                    value: 1,
                    label: '月',
                  },
                ]"
                @change="changeDeleteType"
              ></a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>

          <a-col :span="8">
            <a-form-item
                style="position: relative; z-index: 999"
                :labelCol="{ xs: { span: 12 }, sm: { span: 10 }, style: 'textAlign:left' }"
                :wrapperCol="{ xs: { span: 12 }, sm: { span: 14 }, style: 'textAlign:left' }"
                :label="`照片保留${model.deleteType == 1 ? '月' : '天'}数`"
            >
              <a-input-number
                  :min="0"
                  :max="2100000"
                  style="width: 100px"
                  v-decorator="['deleteDay', { initialValue: 100 }]"
              />
              <span>{{ model.deleteType == 1 ? '月' : '天' }}</span>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item
              :labelCol="{ xs: { span: 12 }, sm: { span: 10 }, style: 'textAlign:left' }"
              :wrapperCol="{ xs: { span: 12 }, sm: { span: 12 }, style: 'textAlign:left' }"
              label="临时车位数量:"
            >
              <a-input-number
                :min="0"
                :max="2100000"
                style="width: 100px"
                v-decorator="['temporaryParking', { initialValue: 100 }]"
              />
              <span>个</span>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item
              style="position: relative; z-index: 999"
              :labelCol="{ xs: { span: 12 }, sm: { span: 10 }, style: 'textAlign:left' }"
              :wrapperCol="{ xs: { span: 12 }, sm: { span: 14 }, style: 'textAlign:left' }"
              label="滞留天数设置:"
            >
              <a-input-number
                :min="0"
                :max="2100000"
                style="width: 100px"
                v-decorator="['venueStayDays', { initialValue: 100 }]"
              />
              <span>天</span>
            </a-form-item>
          </a-col>



        </a-row>
      </a-row>

      <a-row style="height: 10%">
        <div style="text-align: center">
          <a-button @click="$emit('currentChange', 0)"> 上一步 </a-button>
          <a-button type="primary" style="margin-left: 60px" @click="handleOk"> 确认设置 </a-button>
        </div>
      </a-row>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="创建人" v-show="false">
        <a-input placeholder="请输入创建人" v-decorator="['createUser', {}]" />
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="更新日期" v-show="false">
        <a-date-picker showTime format="YYYY-MM-DD HH:mm:ss" v-decorator="['updateTime', {}]" />
      </a-form-item>
    </a-form>
  </a-spin>
</template>
<script>
import { httpAction } from '@/api/manage'
import moment from 'moment'

export default {
  name: 'ConfigParkInfoModal',
  props: {
    parkInfo: {
      type: Object,
      default: () => {},
    },
  },

  data() {
    return {
      title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: {
          span: 12,
        },
        sm: {
          span: 6,
        },
        style: 'textAlign:left',
      },
      wrapperCol: {
        xs: {
          span: 12,
        },
        sm: {
          span: 18,
        },
      },
      labelCol1: {
        xs: {
          span: 24,
        },
        sm: {
          span: 24,
        },
        style: 'textAlign:left',
      },
      wrapperCol1: {
        xs: {
          span: 24,
        },
        sm: {
          span: 24,
        },
      },
      labelCol2: {
        xs: {
          span: 0,
        },
        sm: {
          span: 0,
        },
        style: 'textAlign:left',
      },
      wrapperCol2: {
        xs: {
          span: 24,
        },
        sm: {
          span: 24,
        },
      },
      parkInfoData: {},
      options: [
        { label: 0, value: 0 },
        { label: 1, value: 1 },
        { label: 2, value: 2 },
        { label: 3, value: 3 },
        { label: 4, value: 4 },
        { label: 5, value: 5 },
        { label: 6, value: 6 },
        { label: 7, value: 7 },
      ],
      fillOptions: [
        { label: 1, value: 1 },
        { label: 2, value: 2 },
        { label: 3, value: 3 },
        { label: 4, value: 4 },
        { label: 5, value: 5 },
        { label: 6, value: 6 },
        { label: 7, value: 7 },
        { label: 8, value: 8 },
        { label: 9, value: 9 },
      ],
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {},
      url: {
        add: '/parking/configParkInfo/add',
        edit: '/parking/configParkInfo/edit',
        queryOne: '/parking/configParkInfo/queryOne',
      },

      //过期几天后禁止入场按钮中的select是否要禁用
      disabled: true,
      fillDisabled: true,
      configParkInfoResult: {},

      deleteDayArr: undefined, // 图片保留天数或月数
    }
  },

  created() {
    this.queryData(this.parkInfo)
  },
  watch: {
    parkInfo() {
      this.queryData(this.parkInfo)
    },
  },
  methods: {
    changeDeleteType(value) {
      let deleteDay
      this.model.deleteType = value
      deleteDay = this.deleteDayArr[this.model.deleteType]
      this.form.setFieldsValue({ deleteDay })
    },
    handleMonthlyRentalCarOnChange(e) {
      this.disabled = true
      if (e.target.value === 3) {
        this.disabled = false
      }
      if (e.target.value !== 3) {
        this.$nextTick(() => {
          this.form.setFieldsValue({
            overDay: 0,
          })
        })
      }
    },
    admissionRecordsCarOnChange(e) {
      let fillDayVar = this.model.fillDay
      this.fillDisabled = true
      if (e.target.value === 3) {
        this.fillDisabled = false
      }
      if (e.target.value !== 3) {
        this.$nextTick(() => {
          this.form.setFieldsValue({
            fillDay: fillDayVar,
          })
        })
      }
    },
    admissionRecordsCarStoredCarOnChange(e) {
      let fillDayVar = this.model.fillDay
      this.fillDisabled = true
      if (e.target.value === 3) {
        this.fillDisabled = false
      }
      if (e.target.value !== 3) {
        this.$nextTick(() => {
          this.form.setFieldsValue({
            fillDay: fillDayVar,
          })
        })
      }
    },
    queryData(parkInfo) {
      this.confirmLoading = true
      this.form.resetFields()
      const that = this
      const parkCode = parkInfo.parkCode
      httpAction(this.url.queryOne, { parkCode: parkCode }, 'post')
        .then((res) => {
          if (res.success) {
            that.configParkInfoResult = res.result

            if (res.result != null) {
              if (!that.form) {
                return
              }
              this.model.id = res.result.id
              this.showData()
            }
          } else {
            that.$message.warning(res.message)
          }
        })
        .finally(() => {
          that.confirmLoading = false
          // that.close();
        })
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields(async (err, values) => {
        if (!err) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl = this.url.add
            method = 'post'
          } else {
            httpurl = this.url.edit
            method = 'put'
          }
          let formData = Object.assign(this.model, values)
          //时间格式化
          formData.updateTime = formData.updateTime ? formData.updateTime.format('YYYY-MM-DD HH:mm:ss') : null
          formData.temporaryStallType = formData.temporaryStallType ? 1 : 0
          formData.licensablePay = formData.licensablePay ? 1 : 0
          formData.temporaryCarZero = formData.temporaryCarZero ? 1 : 0
          formData.policeCar = formData.policeCar ? 1 : 0
          formData.temporaryStopIn = formData.temporaryStopIn ? 1 : 0
          formData.unlicensedCar = formData.unlicensedCar ? 1 : 0
          // formData.zeroCar = formData.zeroCar ? 1 : 0;
          formData.parkCode = this.parkInfo.parkCode
          formData.parkName = this.parkInfo.parkName
          formData.useCoupon = formData.useCoupon ? 1 : 0


          await httpAction(httpurl, formData, method)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('currentChange', 1)
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
        }
      })
    },
    showData() {
      // this.form.resetFields();

      this.model = Object.assign({}, this.configParkInfoResult)
      this.visible = true
      this.deleteDayArr = [1, 1]
      this.deleteDayArr[this.model.deleteType] = this.model.deleteDay
      if (JSON.stringify(this.configParkInfoResult) === '{}') {
        this.disabled = true
      }
      if (
        JSON.stringify(this.configParkInfoResult) !== '{}' &&
        Number(this.configParkInfoResult.handleMonthlyRentalCar) !== 3
      ) {
        this.disabled = true
      }
      if (
        JSON.stringify(this.configParkInfoResult) !== '{}' &&
        Number(this.configParkInfoResult.handleMonthlyRentalCar) === 3
      ) {
        this.disabled = false
      }
      if (
        JSON.stringify(this.configParkInfoResult) !== '{}' &&
        Number(this.configParkInfoResult.admissionRecordsCar) !== 3
      ) {
        this.fillDisabled = true
      }
      if (
        JSON.stringify(this.configParkInfoResult) !== '{}' &&
        Number(this.configParkInfoResult.admissionRecordsCar) === 3
      ) {
        this.fillDisabled = false
      }

      if (
          JSON.stringify(this.configParkInfoResult) !== '{}' &&
          Number(this.configParkInfoResult.admissionRecordsCarStoredCar) !== 3
      ) {
        this.fillDisabled = true
      }
      if (
          JSON.stringify(this.configParkInfoResult) !== '{}' &&
          Number(this.configParkInfoResult.admissionRecordsCarStoredCar) === 3
      ) {
        this.fillDisabled = false
      }

      this.$nextTick(() => {
        if (JSON.stringify(this.configParkInfoResult) !== '{}') {
          this.form.setFieldsValue({
            monthlyRentalGateOut: Number(this.configParkInfoResult.monthlyRentalGateOut),
          })
          this.form.setFieldsValue({
            useCoupon: Number(this.configParkInfoResult.useCoupon),
          })
          this.form.setFieldsValue({
            monthlyRentalGateIn: Number(this.configParkInfoResult.monthlyRentalGateIn),
          })
          this.form.setFieldsValue({
            temporaryGateIn: Number(this.configParkInfoResult.temporaryGateIn),
          })
          this.form.setFieldsValue({
            temporaryGateOut: Number(this.configParkInfoResult.temporaryGateOut),
          })
          this.form.setFieldsValue({
            temporaryParking: Number(this.configParkInfoResult.temporaryParking),
          })
          this.form.setFieldsValue({
            handleMonthlyRentalCar: Number(this.configParkInfoResult.handleMonthlyRentalCar),
          })
          this.form.setFieldsValue({
            admissionRecordsCar: Number(this.configParkInfoResult.admissionRecordsCar),
          })
          this.form.setFieldsValue({
            admissionRecordsCarStoredCar: Number(this.configParkInfoResult.admissionRecordsCarStoredCar),
          })
          this.form.setFieldsValue({
            overDay: Number(this.configParkInfoResult.overDay),
          })
          this.form.setFieldsValue({
            fillDay: Number(this.configParkInfoResult.fillDay),
          })
          this.form.setFieldsValue({
            policeCar: Number(this.configParkInfoResult.policeCar) !== 0,
          })
          this.form.setFieldsValue({
            temporaryStopIn: Number(this.configParkInfoResult.temporaryStopIn) !== 0,
          })
          this.form.setFieldsValue({
            temporaryCarZero: Number(this.configParkInfoResult.temporaryCarZero) !== 0,
          })
          this.form.setFieldsValue({
            temporaryStallType: Number(this.configParkInfoResult.temporaryStallType) !== 0,
          })
          this.form.setFieldsValue({
            licensablePay: Number(this.configParkInfoResult.licensablePay) !== 0,
          })
          this.form.setFieldsValue({
            cameraType: Number(this.configParkInfoResult.cameraType),
          })
          this.form.setFieldsValue({
            controlPanelType: Number(this.configParkInfoResult.controlPanelType),
          })
          this.form.setFieldsValue({
            venueStayDays: Number(this.configParkInfoResult.venueStayDays),
          })
          this.form.setFieldsValue({
            deleteDay: Number(this.configParkInfoResult.deleteDay),
          })
        }
        //时间格式化
        this.form.setFieldsValue({
          updateTime: this.model.updateTime ? moment(this.model.updateTime) : null,
        })
        this.confirmLoading = false
      })
    },

    close() {
      this.$emit('close')
      this.visible = false
    },

    handleCancel() {
      this.close()
    },
  },
}
</script>

<style lang="less" scoped>
::v-deep .ant-form-item-control {
  z-index: 99;
}
</style>
